<template>
	<view class="merchant-page">
		<view class="content">
			<!-- 信息列表区域 -->
			<view class="first-section">
				<view class="merchant-info">
					<text class="label">负责人:</text>
					<input type="text" v-model="merchantInfo.director" class="input-field" />
				</view>
				<view class="merchant-info">
					<text class="label">身份证号码:</text>
					<input type="number" v-model="merchantInfo.idCard" class="input-field" />
				</view>
				<view class="merchant-info">
					<text class="label">联系电话:</text>
					<input type="number" v-model="merchantInfo.moble" class="input-field" />
				</view>
				<view class="merchant-info">
					<text class="label">店铺名:</text>
					<input type="text" v-model="merchantInfo.name" class="input-field" />
				</view>
				<view class="merchant-info">
					<text class="label">工商营业执照号码:</text>
					<input type="text" v-model="merchantInfo.businessLicenseId" class="input-field" />
				</view>
				<view class="merchant-info">
					<text class="label">经营区域:</text>
					<input type="text" v-model="merchantInfo.operatingArea" class="input-field" />
				</view>
				<view class="merchant-info">
					<text class="label">地址:</text>
					<input type="text" v-model="merchantInfo.address" class="input-field" />
				</view>
				<view class="merchant-info intro-wrap">
					<text class="label">商家介绍:</text>
					<textarea v-model="merchantInfo.description" placeholder="请介绍您的商铺" class="textarea-field" />
				</view>
				<view class="merchant-info">
					<text class="label">身份证照片(人像):</text>
					<uni-file-picker limit="1" v-model="merchantInfo.front" class="file-picker"></uni-file-picker>
				</view>
				<view class="merchant-info">
					<text class="label">身份证照片(国徽):</text>
					<uni-file-picker limit="1" v-model="merchantInfo.opposite" class="file-picker"></uni-file-picker>
				</view>
				<view class="merchant-info">
					<text class="label">营业执照照片:</text>
					<uni-file-picker limit="1" v-model="merchantInfo.businessLicenseImg"
						class="file-picker"></uni-file-picker>
				</view>
				<view class="merchant-info">
					<text class="label">商家照片:</text>
					<uni-file-picker limit="1" v-model="merchantInfo.photo" class="file-picker"></uni-file-picker>
				</view>
				<button class="info-btn" @click="submitInfo">提交</button>
			</view>
			<!-- 营业时间 -->
			<view class="business-time">
				<view class="time-item">
					<text class="label">开始营业时间:</text>
					<picker :value="startPickerIndex" :range="timeOptions" @change="onStartTimeChange">
						<view class="picker-display">
							{{ merchantInfo.start || '请选择开始时间' }}
						</view>
					</picker>
				</view>
				<view class="time-item">
					<text class="label">结束营业时间:</text>
					<picker :value="endPickerIndex" :range="timeOptions" @change="onEndTimeChange">
						<view class="picker-display">
							{{ merchantInfo.end || '请选择结束时间' }}
						</view>
					</picker>
				</view>
				<button class="time-btn" @click="submitTime">提交</button>
			</view>
			<!-- 经营状态 -->
			<view class="merchant-status">
				<text class="label">营业状态:</text>
				<switch @change="switch2Change" class="status-switch" />
				<text class="status-text">{{ merchantInfo.status === 0 ? '营业中' : '休假中' }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				merchantInfo: {
					director: '',
					idCard:'' ,
					mobile:'' ,
					name: '',
					businessLicenseId: '',
					operatingArea: '',
					address: '',
					description: '！',
					front: [],
					opposite: [],
					businessLicenseImg: [],
					photo: [],
					startTime: '',
					endTime: '',
					status: '',
				},
				mid:'',
				token:'',
				mobile:'',
				startPickerIndex: 0,
				endPickerIndex: 8,
				timeOptions: [],
			};
		},
		created() {
			this.generateTimeOptions();
			this.getShopInfoFromCache();
		},
		onMount:{},
		methods: {
			switch2Change(e) {
				this.merchantInfo.status = e.detail.value ? 0 : 1;
			},
			generateTimeOptions() {
				const options = [];
				for (let h = 0; h < 24; h++) {
					for (let m = 0; m < 60; m += 30) {
						const hour = String(h).padStart(2, '0');
						const minute = String(m).padStart(2, '0');
						options.push(`${hour}:${minute}`);
					}
				}
				this.timeOptions = options;
			},
			onStartTimeChange(e) {
				this.startPickerIndex = e.detail.value;
				this.merchantInfo.start = this.timeOptions[e.detail.value];
			},
			onEndTimeChange(e) {
				this.endPickerIndex = e.detail.value;
				this.merchantInfo.end = this.timeOptions[e.detail.value];
			},
			compareTimes() {
				if (this.merchantInfo.start && this.merchantInfo.end) {
					const start = this.merchantInfo.start.split(':').map(Number);
					const end = this.merchantInfo.end.split(':').map(Number);
					const startMinutes = start[0] * 60 + start[1];
					const endMinutes = end[0] * 60 + end[1];
					if (endMinutes <= startMinutes) {
						uni.showToast({
							title: '结束时间必须晚于开始时间',
							icon: 'none',
						});
						return false;
					}
				}
				return true;
			},
			submitInfo() {
				// 提交信息的逻辑，可根据需要补充
				console.log('提交商家信息', this.merchantInfo);
			},
			submitTime() {
				if (this.compareTimes()) {
					console.log('提交营业时间', this.merchantInfo.start, this.merchantInfo.end);
				}
			},
			
			// 从VueX store获取token和mid，然后调用接口获取店铺信息
			async getShopInfoFromCache() {
				try {
					// 从VueX store获取token和mid
					this.token = this.$store.getters.getToken;
					this.mid = this.$store.getters.getMid;
					
					console.log('从VueX store获取的token:', this.token);
					console.log('从VueX store获取的mid:', this.mid);
					
					if (!this.token) {
						console.log('未找到token');
						uni.showToast({
							title: '请先登录',
							icon: 'none'
						});
						return;
					}
					
					if (!this.mid) {
						console.log('未找到mid');
						uni.showToast({
							title: '店铺信息异常，请重新登录',
							icon: 'none'
						});
						return;
					}
					
					// 调用接口获取店铺详细信息
					await this.getShopDetails(this.mid, this.token);
				} catch (error) {
					console.error('获取店铺信息失败:', error);
					uni.showToast({
						title: '获取店铺信息失败',
						icon: 'none'
					});
				}
			},
			
			// 获取店铺详细信息
			async getShopDetails(mid,token) {
				try {
					const response = await uni.request({
						url: `http://localhost:8080/merchant/shopverification/listAll/${mid}`,
						method: 'GET',
						header: {
							'Content-Type': 'application/json',
							'Authorization': `Bearer ${token}`
						}
					});
					
					console.log('获取店铺详细信息的响应:', response);
					
					// 处理uni.request返回的数组格式 [err, res]
					const [err, res] = response;
					if (err) {
						console.error('获取店铺详细信息请求失败:', err);
						return null;
					}
					
					if (res.statusCode === 200 && res.data) {
						console.log('获取店铺详细信息成功，返回数据:', res.data);
						console.log('店铺详细信息:', res.data);
						return res.data;
					} else {
						console.error('获取店铺详细信息失败:', res);
						return null;
					}
				} catch (error) {
					console.error('调用获取店铺详细信息接口失败:', error);
					return null;
				}
			}
			
		},
	};
</script>

<style>
	.merchant-page {
		background-color: #fff;
		padding: 20rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.merchant-info {
		display: flex;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.label {
		font-size: 32rpx;
		color: #333;
		width: 220rpx;
		margin-right: 20rpx;
		display: inline-block;
	}

	.input-field {
		flex: 1;
		border: 1px solid #eee;
		border-radius: 8rpx;
		padding: 15rpx;
		font-size: 30rpx;
		color: #666;
	}

	.intro-wrap {
		align-items: flex-start;
	}

	.textarea-field {
		flex: 1;
		border: 1px solid #eee;
		border-radius: 8rpx;
		padding: 15rpx;
		font-size: 30rpx;
		color: #666;
		min-height: 120rpx;
		line-height: 40rpx;
	}

	.file-picker {
		flex: 1;
	}

	.info-btn,
	.time-btn {
		background-color: #007AFF;
		color: #fff;
		border-radius: 8rpx;
		font-size: 32rpx;
		width: 360rpx;
		height: 80rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.business-time {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.time-item {
		display: flex;
		align-items: center;
		width: 720rpx;
	}

	.picker-display {
		flex: 1;
		border: 1px solid #eee;
		border-radius: 8rpx;
		padding: 15rpx;
		font-size: 30rpx;
		color: #666;
		text-align: center;
		width: 240rpx;
	}

	.merchant-status {
		display: flex;
		align-items: center;
	}

	.status-switch {
		margin: 0 20rpx;
	}

	.status-text {
		font-size: 30rpx;
		color: #333;
	}
	input {
	  border: none !important;
	}
	textarea{
		border: none !important;
	}
</style>